<template>
  <view class="container">
    <view class="notice-detail">
      <view class="notice-title">{{ notice.title }}</view>
      <view class="notice-date">{{ notice.date }}</view>
      <view class="notice-category">{{ notice.category }}</view>
      <view class="notice-content" v-html="notice.content"></view>
      <view class="actions">
        <button @click="toggleFavorite">{{ isFavorite ? '取消收藏' : '收藏' }}</button>
        <button @click="showComments = !showComments">{{ showComments ? '隐藏评论' : '查看评论' }}</button>
      </view>
      <view v-if="showComments" class="comments-section">
        <view class="comment-form">
          <textarea v-model="newComment" placeholder="请输入评论内容"></textarea>
          <button @click="addComment">发表评论</button>
        </view>
        <view v-for="(comment, index) in comments" :key="index" class="comment-item">
          <view class="comment-user">{{ comment.user }}</view>
          <view class="comment-text">{{ comment.text }}</view>
          <view class="comment-date">{{ comment.date }}</view>
        </view>
      </view>
    </view>
  </view>
</template>



<script>
export default {
  data() {
    return {
      notice: {},
      comments: [],
      newComment: '',
      showComments: false,
      isFavorite: false
    };
  },
  onLoad(options) {
    const noticeId = options.id;
    this.fetchNoticeById(noticeId);
    this.fetchComments(noticeId);
    this.checkFavorite(noticeId);
  },
  methods: {
    fetchNoticeById(id) {
      uni.request({
        url: `https://your-api-endpoint/notices/${id}`, // 替换为实际API地址
        method: 'GET',
        success: (res) => {
          this.notice = res.data;
        },
        fail: (err) => {
          console.error('获取公告详情失败', err);
        }
      });
    },
    fetchComments(id) {
      uni.request({
        url: `https://your-api-endpoint/notices/${id}/comments`, // 替换为实际API地址
        method: 'GET',
        success: (res) => {
          this.comments = res.data;
        },
        fail: (err) => {
          console.error('获取评论失败', err);
        }
      });
    },
    addComment() {
      if (this.newComment.trim() === '') {
        uni.showToast({
          title: '评论内容不能为空',
          icon: 'none'
        });
        return;
      }
      uni.request({
        url: `https://your-api-endpoint/notices/${this.notice.id}/comments`, // 替换为实际API地址
        method: 'POST',
        data: {
          text: this.newComment
        },
        success: (res) => {
          this.comments.push(res.data);
          this.newComment = '';
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('发表评论失败', err);
        }
      });
    },
    toggleFavorite() {
      if (this.isFavorite) {
        uni.request({
          url: `https://your-api-endpoint/favorites/${this.notice.id}`, // 替换为实际API地址
          method: 'DELETE',
          success: () => {
            this.isFavorite = false;
            uni.showToast({
              title: '已取消收藏',
              icon: 'success'
            });
          },
          fail: (err) => {
            console.error('取消收藏失败', err);
          }
        });
      } else {
        uni.request({
          url: `https://your-api-endpoint/favorites`, // 替换为实际API地址
          method: 'POST',
          data: {
            noticeId: this.notice.id
          },
          success: () => {
            this.isFavorite = true;
            uni.showToast({
              title: '已收藏',
              icon: 'success'
            });
          },
          fail: (err) => {
            console.error('收藏失败', err);
          }
        });
      }
    },
    checkFavorite(id) {
      uni.request({
        url: `https://your-api-endpoint/favorites/${id}`, // 替换为实际API地址
        method: 'GET',
        success: (res) => {
          this.isFavorite = res.data.isFavorite;
        },
        fail: (err) => {
          console.error('检查收藏状态失败', err);
        }
      });
    }
  }
};
</script>



<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.notice-detail {
  width: 100%;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
}

.notice-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.notice-date {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
}

.notice-category {
  font-size: 14px;
  color: #007aff;
  margin-bottom: 20px;
}

.notice-content {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.actions {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.actions button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
}

.comment-form {
  width: 100%;
  margin-bottom: 20px;
}

.comment-form textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

.comment-form button {
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}

.comments-section {
  width: 100%;
}

.comment-item {
  width: 100%;
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.comment-user {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-text {
  font-size: 14px;
  margin-bottom: 5px;
}

.comment-date {
  font-size: 12px;
  color: #888;
}
</style>


